<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html ;charset=utf-8" />
    <!-- JQuery import -->

   <%--
    <!-- CND 方式引入 JS/CSS  -->
    <script src="//cdn.staticfile.org/jquery/2.2.1/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery.form/3.50/jquery.form.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />
    --%>

    <!-- 本地方式引入 JS/CSS -->
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/upload/ajaxUpload1/jquery.form.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />
</head>

<body>
<!-- Upload file form -->
<form id="upload-file-form" enctype="multipart/form-data" method="post" >
    <label for="upload-file-input">Ajax提交图片</label>
    <div  id="btnUp"  class="upload-cover-btn" > 选择文件
         <input id="upload-file-input"  type="file"capture="camera" accept="image/*" name="uploadFile"  multiple="multiple" />
    </div>
        <br>
    <input id="btnSub" style="width:100px;height: 30px; display: block"  type="submit" value="提交">
</form>

</br>
<span id="upload-file-message" ></span>
<div id="img_list"></div>

<script>

    $(function () {
        var options = {
            target:        '#upload-file-message',   // target element(s) to be updated with server response
           // beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse,  // post-submit callback
            error:         showErrorResponse, // post-submit but field callback
            // other available options:
            url:       '/ajax/upload',        // override for form's 'action' attribute
            type:      'post',        // 'get' or 'post', override for form's 'method' attribute
            dataType:  'json'  ,      // 'xml', 'script', or 'json' (expected server response type)
            clearForm: true ,       // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit
            // $.ajax options can be used here too, for example:
            timeout:   30000
        };
        // bind form using 'ajaxForm'
        $('#upload-file-form').ajaxForm(options);

    });

    function showResponse(data, status, xhr, $form)  {
        // for normal html responses, the first argument to the success callback
        // is the XMLHttpRequest object's responseText property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'xml' then the first argument to the success callback
        // is the XMLHttpRequest object's responseXML property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'json' then the first argument to the success callback
        // is the json data object returned by the server
        $("#upload-file-message").text(data.message);
        addImage(data);

    }
    function showErrorResponse(data, status)  {
        $("#upload-file-message").text(data.message);
    }


    //add by tomas
    //添加图片
    function addImage(data) {
        //alert(data);
        var images = []; //已经上传的图片列表
        // 优化retina, 在retina下这个值是2
        var ratio = window.devicePixelRatio || 1,thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio;
        if ( data.code != "200" ) return;
        var text ='<div class="img-wrapper"><div class="img-container" style="width: "+thumbnailWidth; height:"+thumbnailHeight>';
        text += '<img width="113px" height="113px"  src="'+data.data+'">';
        text += '<div class="file-opt-box clearfix"><span class="remove">删除</span></div></div></div>';
        var $image =$(text);
        $("#img_list").append($image);
        //删除图片
        $image.find(".remove").on("click", function() {
            try {
                var src = $(this).parent().prev().attr("src");
                images.remove(src);
                $image.remove();
            } catch (e) {console.log(e);}
        });
        images.push(data.data);
        console.log(images);
    }
    if ( Array.prototype.remove == undefined ) {
        Array.prototype.remove = function(item) {
            for ( var i = 0; i < this.length; i++ ) {
                if ( this[i] == item ) {
                    this.splice(i, 1);
                    break;
                }
            }
        }
    }

</script>

</body>

</html>
